<template>
  <!-- 书写html结构 -->
  <div>
    <!-- 头部刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 粘性布局 -->
      <van-sticky>
        <!-- 标题 -->
        <van-row
          style="height: 40px; line-height: 40px; background-color: #ffffff">
          <van-col span="4">
            <!-- 主页提示信息 -->
            <van-icon
              name="bell"
              :badge="this.messagetotal"
              style="font-size: 20px"
              @click="jump('about')" />
          </van-col>
          <van-col span="16">ETCC自助洗车</van-col>
          <van-col span="4"></van-col>
        </van-row>
      </van-sticky>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images">
          <img
            :src="image"
            style="height: 195px; width: 100%; border-radius: 7px" />
        </van-swipe-item>
      </van-swipe>
      <!-- 中间的空白部分 -->
      <van-row style="height: 8px; background-color: #ffffff">
        <van-col span="5"> </van-col>
        <van-col span="1"></van-col>
        <van-col span="9"></van-col>
        <van-col span="1"></van-col>
        <van-col span="4"></van-col>
        <van-col span="4"></van-col>
      </van-row>

      <!-- 天气 -->
      <van-row style="height: 80px">
        <van-col span="5">
          <van-icon name="location-o" color="blue" />
          {{ weather.city }}
        </van-col>
        <van-col span="11">
          <!-- 度数 -->
          <van-row type="flex" justify="center" style="height: 40px">
            <van-col span="6"></van-col>
            <van-col span="6" style="font-size: 25px">
              {{ weather.temperature }}℃
            </van-col>
            <van-col span="6"></van-col>
          </van-row>
          <!-- 今日参数 -->
          <van-row
            type="flex"
            justify="center"
            style="height: 40px; font-size: 15px">
            <van-col span="6"> 今天 | </van-col>
            <van-col span="6"> {{ weather.weather }} | </van-col>
            <van-col span="12">
              {{ weather.winddirection }}风{{ weather.windpower }}级
            </van-col>
          </van-row>
        </van-col>
        <!-- 明天 -->
        <van-col span="8" style="font-size: 12px; margin-top: 12px">
          <van-row type="flex" justify="center" style="height: 26px">
            <van-col span="18">
              空气湿度
              <br />
              {{ weather.humidity }}%
            </van-col>
          </van-row>
        </van-col>
      </van-row>
      <!-- 中间的空白部分 -->
      <van-row style="height: 8px; background-color: #ffffff">
        <van-col span="5"> </van-col>
        <van-col span="1"></van-col>
        <van-col span="9"></van-col>
        <van-col span="1"></van-col>
        <van-col span="4"></van-col>
        <van-col span="4"></van-col>
      </van-row>
      <!-- 选项 -->
      <van-row style="height: 90px">
        <van-col span="6" @click="jump('payment')">
          <van-icon name="paid" size="50" color="#3ca9b5" />
          <br />
          充值
        </van-col>
        <van-col span="6" @click="settlement">
          <van-icon name="sign" size="50" color="#3ca9b5" />
          <br />
          结算
        </van-col>
        <van-col
          span="6"
          @click="
            jumpAdd(
              'Selectlicenseplate',
              personal.id,
              personal.smallname,
              personal.account
            )
          ">
          <van-icon name="logistics" size="50" color="#3ca9b5" />
          <br />
          添加车辆
        </van-col>
        <van-col span="6" @click="jump('CarWashCalendar')">
          <van-icon name="calendar-o" size="50" color="#3ca9b5" />
          <br />
          日历
        </van-col>
      </van-row>
      <!-- 附近门店 -->
      <van-row style="height: 50px">
        <van-col span="4" style="margin-top: 5px; margin-left: 8px"
          >附近门店</van-col
        >
        <van-col span="15" style="margin-top: 5px"
          >全国已有店铺{{ this.stores.length }}家</van-col
        >
        <van-col span="4" style="margin-top: 5px">
          <a href="#" @click="jump('nearByStores')">更多 >></a>
        </van-col>
      </van-row>
      <!-- 附近门店块级别元素 -->
      <!-- 附近门店块级别元素 -->
      <van-card
        :thumb="store.storeimage"
        style="text-align: left"
        v-for="(store, index) in stores"
        v-if="index < 3"
        @click="jumpId('information', store.storeId)">
        <template #tags>
          <!-- 门店名称 -->
          <van-cell class="storeName">{{ store.storeName }}</van-cell>
          <!-- 门店星级 -->
          <div class="interval">
            <van-rate
              color="rgb(255, 167, 56)"
              v-model="store.country"
              size="20px"
              readonly />
            <!-- 门店距离 -->
            <span class="distance">{{ store.jvli }}km</span>
          </div>

          <div class="interval">
            <van-tag class="min1" type="medium" size="large"
              >工位:&nbsp;&nbsp;{{ store.countA }}</van-tag
            >
            &nbsp;
            <van-tag class="min2" type="medium" size="large"
              >空闲:&nbsp;&nbsp;{{ store.idleNumber }}</van-tag
            >
            &nbsp;
            <van-tag class="min3" type="medium" size="large"
              >使用中:&nbsp;&nbsp;{{ store.countB }}</van-tag
            >
          </div>

          <!-- 门店标签 -->
          <div class="interval">
            <van-tag
              class="keyword"
              v-for="(item, index) in store.storeLabels"
              :key="index"
              :list="item.list"
              >{{ item.labelContent }}</van-tag
            >&nbsp;
          </div>

          <!-- 门店地址 -->
          <van-cell class="address"
            ><van-icon name="location" color="skyblue" />
            {{ store.address }}</van-cell
          >
        </template>
      </van-card>
      <hr />
      <!-- 最下方的热门推荐 -->
      <van-row style="height: 50px">
        <van-col span="4" style="margin-top: 5px; margin-left: 8px"
          >热门推荐</van-col
        >
        <van-col span="15" style="margin-top: 5px"></van-col>
        <van-col span="4" style="margin-top: 5px">
          <a href="#" @click="jump('store')">更多 >></a>
        </van-col>
      </van-row>
      <!-- 热点推荐的元素 -->
      <van-row style="height: 220px">
        <van-col span="2"></van-col>
        <van-col
          span="10"
          style="text-align: left; margin-left: -3px; margin-right: 12px"
          v-for="(item, index) in databaseName"
          v-if="index < 2"
          @click="jumpIdA('singleCommodity', item)">
          <div style="width: 100%; height: 130px">
            <img
              :src="item.imageurl"
              style="height: 100%; width: 100%; border-radius: 7px" />
          </div>
          {{ item.commodityName }}
          <div style="font-size: 23px; color: red">
            ￥ {{ item.coupon }}.00
          </div>
          <div>
            <s style="font-size: 15px; float: left">￥ {{ item.price }}.00</s>
            <span style="font-size: 12px; float: right"
              >月销{{ item.prompt }}</span
            >
          </div>
          <br />
          <span style="font-size: 15px; margin-left: -54px"
            >{{ item.stName }} </span
          ><span style="font-size: 15px; margin-left: 18px"
            >&nbsp;&nbsp;&nbsp;&nbsp; ></span
          >
        </van-col>
        <van-col span="2"></van-col>
        <van-col span="1"></van-col>
      </van-row>

      <!-- 下面的空白 -->
      <van-row style="height: 80px">
        <van-col span="5"> </van-col>
        <van-col span="11">
          <!-- 度数 -->
          <van-row type="flex" justify="center" style="height: 40px">
            <van-col span="6"></van-col>
            <van-col span="6"> </van-col>
            <van-col span="6"></van-col>
          </van-row>
          <!-- 今日参数 -->
          <van-row
            type="flex"
            justify="center"
            style="height: 40px; font-size: 15px">
            <van-col span="6"> </van-col>
            <van-col span="6"></van-col>
            <van-col span="12"> </van-col>
          </van-row>
        </van-col>
      </van-row>

      <!-- 底部标签 -->
      <van-tabbar v-model="active">
        <van-tabbar-item name="home" icon="home-o" @click="jump('/')"
          >主页</van-tabbar-item
        >
        <van-tabbar-item
          name="search"
          icon="search"
          @click="jump('nearByStores')"
          >附近门店</van-tabbar-item
        >
        <van-tabbar-item name="friends" icon="cart-o" @click="jump('/store')"
          >商城</van-tabbar-item
        >
        <van-tabbar-item name="setting" icon="user-o" @click="jump('/myView')"
          >我的</van-tabbar-item
        >
      </van-tabbar>
    </van-pull-refresh>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
//书写组件配置项目 相当于写js代码的地方
//要求template必须有且只有一个根元素，如果有两个就不知道绑定那个
export default {
  //export default 相当于过去的new vue ({el:"#div"})
  //全部都是json格式

  props: {
    //注册属性，用来父子组件传递参数使用
  },
  data() {
    //定义数据的地方
    return {
      key: "d1be5f08c6456683633e78f7c28c47df",
      rectangle: "", //自己所在位置的经纬度
      isLoading: false, //刷新参数
      active: "home", //底部标签绑定
      images: [
        //轮播图
        "https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800",
        "https://img0.baidu.com/it/u=4162443464,2854908495&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
      ],
      messagetotal: 100, //主页左上角铃铛信息数量
      weather: {
        //主页地区天气
        city: "金水区",
        adcode: "",
        weather: "",
        temperature: "",
        winddirection: "",
        windpower: "",
        humidity: "",
      },
      databaseName: [],
      personal: {},
      stores: [], //店铺信息
    };
  },
  created() {
    //生命周期  创建后要做的事情  vue被创建时候执行的
    // this.WeaCode();
    this.getLocationInfo();
    this.productTable();
    this.loadUser();
  },
  mounted() {
    // 生命周期  挂载完成后
  },
  methods: {
    //  方法事件处理
    //刷新方法
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        //调用请求
      }, 1000);
    },
    jump(uri) {
      this.$router.push(uri);
    },
    jumpId(uri, id) {
      this.$router.push({ name: uri, query: { id: id } });
    },
    jumpIdA(uri, product) {
      this.$router.push({
        name: uri,
        query: { data: JSON.stringify(product) },
      });
    },
    jumpAdd(uri, id, smala, pho) {
      this.$router.push({
        name: uri,
        query: { id: id, smala: smala, pho: pho },
      });
    },

    settlement() {
      this.popupVisible = true;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/checkoutInfo/queryUser")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            if (response.data.data.length < 1) {
              Toast("暂无车辆进场");
            } else {
              _this.$router.push("SettlementDoorOpening");
            }
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    // 获取用户位置信息
    async getLocationInfo() {
      const params = {
        key: this.key,
      };
      const { data } = await axios.get("https://restapi.amap.com/v3/ip", {
        params,
      });
      // data.adcode值为获取天气需要的city值
      let aaa = data.rectangle.split(";");
      this.rectangle = aaa[0];
      // alert(JSON.stringify(this.rectangle));
      this.getWeather(data.adcode);
      this.loadData();
    },
    // 获取天气详情
    async getWeather(adcode) {
      const params = {
        key: this.key,
        city: adcode,
      };
      const { data } = await axios.get(
        `https://restapi.amap.com/v3/weather/weatherInfo`,
        { params }
      );
      // alert(JSON.stringify(data));
      this.weather = data.lives[0];
    },

    // 获取用户信息
    loadUser() {
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      this.$http
        .get("/tuser/queryBy")
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            //this不可以直接使用 代表的是axios对象
            // alert(JSON.stringify(response.data.data))
            _this.personal = response.data.data;
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    loadData() {
      var _this = this;
      this.$http
        .get("/tbStore/selectStoreByStoreId")
        .then(function (response) {
          console.log("用户绑定的门店信息。。。。。");
          console.log(JSON.stringify(response));
          if (response.data.code == 200) {
            _this.stores = response.data.data; //查询出来的门店信息
            //查询店铺标签信息
            // _this.selectStoreLabels();
            _this.mendian();
          }
        })
        .catch(function (error) {
          //alert(JSON.stringify(error));
          _this.$toast("你错了。。。");
        });
    },
    async mendian() {
      let num = -1;
      //不是直接使用axios 而是使用$http
      //baseURL="http://localhost:8080"
      var _this = this;
      for (var i = 0; i < this.stores.length; i++) {
        const params = {
          key: this.key,
          origins: this.rectangle,
          destination:
            this.stores[i].longitude + "," + this.stores[i].latitude,
        };
        const { data } = await axios.get(
          `https://restapi.amap.com/v3/distance`,
          { params }
        );
        this.stores[i].jvli = data.results[0].distance / 1000;
        var _this = this;
        this.$http
          .get(
            "/storeLabels/selectLabelByStoreId?storeId=" +
              this.stores[i].storeId
          )
          .then(function (response) {
            console.log("店铺标签信息。。。。。");
            console.log(JSON.stringify(response));
            if (response.data.code == 200) {
              num = num + 1;
              _this.stores[num].storeLabels = response.data.data; //查询出来的店铺标签
              // alert(JSON.stringify(_this.stores[num].storeLabels))
            }
          })
          .catch(function (error) {
            //alert(JSON.stringify(error));
            console(error);
            _this.$toast.error("你错了。。。");
          });
      }
    },

    //获取商品
    productTable() {
      var _this = this;
      this.$http
        .get("/tbCommodity/queryAllTbCommodity?producttypeid=" + 3)
        .then(function (response) {
          if (response.data.code == 200) {
            let _list = response.data.data;
            if (_list.length == 0) {
              return;
            }
            for (let i = 0; i < _list.length; i++) {
              _this.databaseName.push(_list[i]);
            }
          }
          // alert(JSON.stringify(_this.databaseName))
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  components: {
    // 组件注册的地方 相当于pom文件
  },
};
</script>

<style scoped>
.t-column-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* 轮播图样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 195px;
  border-radius: 10px;
}
.imgcolor {
  /* width: 100px; */
  height: 120px;
}
.imgfor {
  width: 100%;
  height: 100%;
}
.evaluate {
  text-align: left;
}
.storeName {
  font-size: 22px;
  font-weight: 600;
}
.interval {
  margin-top: 5px;
}
.distance {
  text-align: right;
  float: right;
  font-size: 16px;
  line-height: 20px;
  color: rgb(153, 153, 179);
}

.min1 {
  background-color: #39a9ed;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min2 {
  background-color: #38ac83;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.min3 {
  background-color: #df7007bb;
  padding: 2px 8px 2px 1px;
  font-size: 16px;
  border-radius: 4px;
}
.keyword {
  color: rgb(8, 164, 236);
  background-color: rgb(191, 231, 249);
  margin-bottom: 5px;
  margin-right: 5px;
  font-size: 16px;
}
.address > .van-cell__value--alone {
  font-size: 16px;
  color: rgb(153, 153, 179);
}
</style>
